<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>后台管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
</head>
<body>

    <!-- 右 -->
    <div class="content">
        <div class="header">
            <h1 class="page-title">商品列表</h1>
        </div>

        <div class="well">
            <!-- search button -->
            <form action="/shop/goodsList" method="get" class="form-search">
                <div class="row-fluid" style="text-align: left;">
                    <div class="pull-left span4 unstyled">
                        <p> 商品名称：<input class="input-medium" name="goods_name" value="{$goods_name}" type="text"></p>
                    </div>
                </div>
                <div class="row-fluid" style="text-align: left;">
                    <div class="pull-left span4 unstyled">
                        <select name="cate_one_id" id="cate_one_id">
                            <option value="">请选择一级分类</option>
                            {foreach $category_one as $key=>$vo }
                                {if $vo.id == $cate_one_id}
                                    <option value="{$vo.id}" selected="selected">{$vo.cate_name}</option>
                                {else /}
                                    <option value="{$vo.id}">{$vo.cate_name}</option>
                                {/if}

                            {/foreach}
                        </select>
                    </div>
                    <div class="pull-left span4 unstyled">
                        <select name="cate_two_id" id="cate_two_id">

                            {if !empty($category_two)}
<!--                            当有搜索条件的时候-->
                                {foreach $category_two as $k=>$v }
                                    {if $v.id == $cate_two_id}
                                        <option value="{$v.id}" selected="selected">{$v.cate_name}</option>
                                    {else /}
                                        <option value="{$v.id}">{$v.cate_name}</option>
                                    {/if}

                                {/foreach}

                            {else /}
<!--                             没有搜索条件-->
                                <option value="">请选择二级分类</option>
                            {/if}

                        </select>
                    </div>
                    <div class="pull-left span4 unstyled">
                        <select name="cate_three_id" id="cate_three_id">
                            {if !empty($category_three)}
                            <!--                            当有搜索条件的时候-->
                                {foreach $category_three as $kk=>$vv }
                                    {if $vv.id == $cate_three_id}
                                        <option value="{$vv.id}" selected="selected">{$vv.cate_name}</option>
                                    {else /}
                                        <option value="{$vv.id}">{$vv.cate_name}</option>
                                    {/if}

                                {/foreach}

                            {else /}
                            <!--                             没有搜索条件-->
                                <option value="">请选择三级分类</option>
                            {/if}

                        </select>
                    </div>
                </div>
                <button type="submit" class="btn">查找</button>
                <a class="btn btn-primary" href="#">新增</a>

            </form>
            <button class="btn" id="batch-del">批量删除</button>
        </div>
        <div class="well">
            <!-- table -->
            <table class="table table-bordered table-hover table-condensed">
                <thead>
                    <tr>
                        <th><input type="checkbox" class="checkAll"></th>
                        <th>编号</th>
                        <th>商品名称</th>
                        <th>商品状态</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <th>商品logo</th>
                        <th>添加时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {volist name="data" id="goods"}
                    <tr class="success">
                        <td><input type="checkbox" class="check" data-id="{$goods.id}"></td>
                        <td>{$goods.id}</td>
                        <td><a href="javascript:void(0);">{:str_replace($goods_name,"<font color='red'>$goods_name</font>",$goods.goods_name)}</a></td>
                        <td data-id="{$goods.id}">{$goods.goods_status == 2 ? "<span style='color: blue' class='status'>下架</span>": "<span style='color: red' class='status'>上架</span>" }</td>
                        <td>{$goods.goods_price}</td>
                        <td>{$goods.goods_number}</td>
                        <td><img src="{$goods.goods_logo}"></td>
                        <td>{$goods.create_time}</td>
                        <td>
                            <a href="/shop/edit/{$goods.id}"> 编辑 </a>
                            <a href="javascript:void(0);" onclick="if(confirm('确认删除？')) location.href='/shop/delete/{$goods.id}'"> 删除 </a>
                        </td>
                    </tr>
                    {/volist}
                </tbody>
            </table>
            <!-- pagination -->
            <div class="pagination">
                {$data|raw}
            </div>
        </div>
        
        <!-- footer -->
        <footer>
            <hr>
            <p>© 2017 <a href="javascript:void(0);" target="_blank">ADMIN</a></p>
        </footer>
    </div>
</body>

<script>

    // 多级联动
    $("#cate_one_id").change(function () {
        let id = $(this).val(); //获取当前选中的分类id
        // 查询当前分类的子分类
        $.ajax({
            url:"getChildCategory",
            data:{id:id},
            dataType:'json',
            success:function (response) {
                let option_str = '';
                $.each(response.data,function (i,v) {
                    option_str += "<option value='" + v.id + "'>" + v.cate_name   + " </option>";
                })
                $("#cate_two_id").html("<option value=''>请选择二级分类</option>");// 初始化
                $("#cate_two_id").append(option_str);// 将拼接后的值、追加至子分类的select里面
                console.log(option_str);
            }
        })

    })
    $("#cate_two_id").change(function () {
        let id = $(this).val(); //获取当前选中的分类id
        // 查询当前分类的子分类
        $.ajax({
            url:"getChildCategory",
            data:{id:id},
            dataType:'json',
            success:function (response) {
                let option_str = '';
                $.each(response.data,function (i,v) {
                    option_str += "<option value='" + v.id + "'>" + v.cate_name   + " </option>";
                })
                $("#cate_three_id").html("<option value=''>请选择三级分类</option>");// 初始化
                $("#cate_three_id").append(option_str);// 将拼接后的值、追加至子分类的select里面
                console.log(option_str);
            }
        })

    })


    $(function () {
        // 状态的修改 即点即改
        $(".status").click(function () {
            // let id = $(this).parents('tr').find('td:eq(1)').text();
            let id = $(this).parent().attr('data-id');
            let that = $(this);
            // 发送ajax请求、修改数据
            // ajax请求
            $.ajax({
                url:'/shop/updateStatus',//路由
                data:{id:id},//修改的条件
                dataType:'json',//响应的数据格式
                type:'post',// 请求方法
                success:function (response) {
                    //成功的回调
                    alert(response.msg);
                    // 同步页面的状态
                    if (that.text() == '上架') {
                        that.text("下架")
                        that.css('color','blue');
                    } else {
                        that.text("上架");
                        that.css('color','red');
                    }
                }
            })
        })
        // 全选/全不选/反选
        $('.checkAll').click(function () {
           // console.log($(this).prop('checked'));
            let currentAll = $(this).prop('checked');
            // 循环每一行的复选框
            $('.check').each(function (i,v) {
                if ($(v).prop('checked') == currentAll) {
                    $(v).prop('checked',!currentAll);
                } else {
                    $(v).prop('checked',currentAll);
                }
            })
        });


        // 按钮绑定点击事件
        $("#batch-del").click(function () {
            // 获取所有选中的复选框
            if ($('.check:checked').length == 0) {
                alert("请选择要删除的元素");
                return false;
            }
            // 删除提示框
            let result = confirm("确定要删除吗？");
            if (result) {
                // 确定要删除
                // 获取要删除的id
                let ids = [];
                $('.check:checked').each(function (i,v) {
                    ids.push($(v).attr('data-id'));
                })
                // ajax请求
                $.ajax({
                    url:'/shop/batchDel',
                    data:{ids:ids},
                    dataType:'json',
                    type:'post',
                    success:function (response) {
                        alert(response.msg);
                        if (response.code == 200) {
                            // 方法一
                            // location.href='shop/goodsList';
                            // 方法二
                            $('.check:checked').each(function (i,v) {
                                $(v).parents('tr').remove();
                            })
                        }
                    }
                })
            }
        })
    })
</script>
</html>